<template>
	<e-popup :show="active" mode="top" :overlayStyle="overlayStyle" :overlay="dropdownMenuContext.props.overlay" :duration="dropdownMenuContext.props.duration" :zIndex="dropdownMenuContext.props.propsZIndex" :closeOnClickOverlay="dropdownMenuContext.props.closeOnClickOverlay" @close="handleClose" @open="handleOpen" >
	        <view class="e-dropdown-menu-item" :style="bodyStyle">
				<slot>
					<view v-for="item in list" :key="item.id">
						<view class="e-dropdown-menu-item__item"   @tap="handleClick(item)">
							<text class="e-dropdown-menu-item__item__text" :style="[{
								color:props.modelValue === item.value ? dropdownMenuContext.props.activeColor : dropdownMenuContext.props.inactiveColor
							}]">{{item.label}}</text>
							<e-icon name="checkbox-mark" size="18"
								:color="dropdownMenuContext.props.activeColor" v-show="props.modelValue === item.value"  />
						</view>
						<e-line v-if="dropdownMenuContext.props.borderBottom" :color="dropdownMenuContext.props.borderColor"></e-line>
					</view>
					
				</slot>
	        	
	        </view>
		</e-popup>
</template>

<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	import mpMixin from '../../libs/mixin/mpMixin'
	
/**
 * dropdown-menu-item 二维码
 * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
 * @tutorial https://www.uviewui.com/components/popup.html
 * @property {Number | String}				modelValue				绑定值
 * @property {String}						title					菜单标题
 * @property {Array}						list					选项列表
 * @property {Boolean}						disabled				是否禁用
 */
	export default defineComponent({
		name: 'e-dropdown-menu-item',
		mixins: [mpMixin]
	})
</script>

<script lang="ts" setup>
	import {
		reactive,
		computed,
		toRefs,
		provide,
		inject,
		onMounted,
	} from 'vue'
	import {
		dropdownMenuItemProps,
		dropdownMenuItemEmits
	} from './props';
	import {
		dropdownMenuContextKey,
		type DropdownMenuItemContext,
		dropdownMenuItemContextKey
	} from '../../libs/tokens'
	import {
		useDisabled,
		useDefaultProps
	} from '../../libs/hooks'
	import {
		getProperty,
		nanoid,
		empty
	} from '../../libs/utils'
	import {
		throwError,
		addUnit,
		addStyle,
	} from '../../libs/utils/_utils'
	import componentsProps from "../../libs/config/componentsProps";
	import type {
		 DropdownMenuItemProps
	} from "../../libs/config/propsType";
	
	const {
		dropdownMenuItem: dropdownMenuItemDefaultProps
	} = toRefs(componentsProps);
	
	const _props = defineProps(dropdownMenuItemProps)
	const props = useDefaultProps <DropdownMenuItemProps> (_props, dropdownMenuItemDefaultProps);
	const emit = defineEmits(dropdownMenuItemEmits)
	

	
	const dropdownMenuContext = inject(dropdownMenuContextKey)
	if (!dropdownMenuContext) throwError('EDropdownMenuItem', 'e-dropdown-menu-item需要结合e-dropdown-menu组件使用')
	
	const overlayStyle = computed(() => {
		return {
			top:addUnit(dropdownMenuContext.props.height)
		}
	})
	
	const bodyStyle = computed(() => {
		return [{
			paddingTop:addUnit(dropdownMenuContext.props.height)
		},addStyle(props.value.customStyle as Record<string,any>) as Record<string,any>]
	})
	
	type Item = {
		label:string|number,
		value:string|number,
		id:string,
		data:unknown
	}
	
	const list = computed(() => (props.value.options||[]).map(item => {
		return {
			label:getProperty(item,dropdownMenuContext.props.props!.label),
			value:getProperty(item,dropdownMenuContext.props.props!.value),
			id:nanoid(),
			data:item
		}
	}))
	
	// 是否禁用，如果父组件禁用的话，将会忽略子组件的配置
	const dropdownMenuContextDisabled = computed(() => dropdownMenuContext.props?.disabled)
	const elDisabled = useDisabled(dropdownMenuContextDisabled)
	
	const active = computed(() => dropdownMenuContext.activeId === context.id)
	
	const handleOpen = () =>  emit('open')
	const handleClose = () =>  {
		dropdownMenuContext.close()
		emit('close')
	}
	
	const title = computed(() => {
		return props.value.title||getProperty(list.value[0]||{},dropdownMenuContext.props.props!.label)
	})
	
	const handleClick = (e:Item) => {
		emit("update:modelValue", e.value);
		emit("change", {
			value:e.value,
			data:e.data
		});
		
		handleClose()
	}
	
	const toggle = (show?:boolean) => {
		show = empty(show) ? !active.value : show 
		if(show){
			dropdownMenuContext.handleChildToggle(context.id)
			return
		}
		handleClose()
	}
	
	const context: DropdownMenuItemContext = reactive({
		props,
		active,
		title,
		disabled:elDisabled,
		id:nanoid(),
	})
	
	
	
	
	
	
	
	
	onMounted(() => {
		if (dropdownMenuContext) {
			dropdownMenuContext.addField(context)
		}
	})
	
	provide(dropdownMenuItemContextKey, context)
	
	defineExpose({
		toggle
	})
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/dropdown-menu-item.scss";
</style>
